// const baseUrl = 'http://api-breakingnews-web.itheima.net'
//  /my/update/avatar

// 1. 初始化裁剪插件———————————————————————————————————————————————————————
let cropper
// = new Cropper($("#image")[0], {
//   aspectRatio: 1, // 裁剪图层的横纵比例
//   preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
// });
//2.点击上传———————————————————————————————————————————————————————
$('.select').on('click', e => {
  $('#file').click()
})

$('#file').on('change', function () {
  const url = window.URL.createObjectURL(this.files[0]); // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})

//3.确定上传注册事件———————————————————————————————————————————————————————
$('.sure').on('click', e => {
  const canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100
  });
  let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
  // image/jpeg 是对标签输出的base64字符串做出一个类型的标记
  // 等一会儿把头像base64字符串, 放到img标签的src上, img标签根据类型就知道如何解析这串base64字符串

  // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
  base64Str = encodeURIComponent(base64Str);
  const data = "avatar=" + base64Str;
  // axios.post(`${baseUrl}/my/update/avatar`, data, {
  //   headers: {
  //     Authorization: localStorage.getItem('token')
  //   }
  // }).then(res => {
  //   // console.log(res);
  //   if (res.data.status === 0) {
  //     window.parent.getUser()
  //   }
  // })
  avatarMethod(data,res=>{
    if (res.data.status === 0) {
      window.parent.getUser()
    }
  })

})

// 4.把后端的图片渲染到当前裁剪区域——————————————————————————
// axios.get(`${baseUrl}/my/userinfo`, {
//   headers: {
//     Authorization: localStorage.getItem('token')
//   }
// }).then(res => {
//   // console.log(res);
//   if (res.data.status === 0) {
//     const { user_pic } = res.data.data
//     // if (user_pic) {
//       // 判断当前用户是否有头像信息,如果有的话=> 将裁剪框的图片显示做替换
//       if (user_pic) $('#image').prop('src', user_pic)
//       cropper = new Cropper($("#image")[0], {
//         aspectRatio: 1, // 裁剪图层的横纵比例
//         preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
//       });
//     // }
//   }
// })
getUserInfoMethod(res=>{
  if (res.data.status === 0) {
    const { user_pic } = res.data.data
    // if (user_pic) {
      // 判断当前用户是否有头像信息,如果有的话=> 将裁剪框的图片显示做替换
      if (user_pic) $('#image').prop('src', user_pic)
      cropper = new Cropper($("#image")[0], {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
      });
    // }
  }
})